<template>
  <div class="weather-container">
    <h3 v-if="weather">克拉玛依市</h3>
    <div style="display: flex; justify-content: space-evenly">
      <div style="min-width: 40%; display: flex; align-items: center; justify-content: center; flex-direction: column; flex-grow: 1">
        <div v-if="weather" class="iconBox">
          <img alt="Weather Icon" class="icon" :src="getIconUrl(weather.iconCode)" />
        </div>
        <h4 v-if="weather">
          {{ weather.description }}
        </h4>
      </div>
      <div style="padding: 2em; align-items: center; display: flex; flex-direction: column; justify-content: space-evenly">
        <p v-if="weather">温度: {{ weather.temperature }} °C</p>
        <p v-if="weather">湿度: {{ weather.humidity }}%</p>
        <p v-if="weather">风速: {{ weather.windSpeed }} m/s</p>
      </div>
    </div>

    <p v-if="!weather">加载中...</p>
  </div>
</template>

<script lang="ts" setup>
import axios from 'axios'
import { defineOptions, onMounted, ref } from 'vue'

defineOptions({
  name: 'DataScreenLeft1',
})

interface WeatherData {
  cityName: string
  temperature: number
  description: string
  humidity: number
  iconCode: string
  windSpeed: number
}

interface NowWeather {
  obsTime: string
  temp: string
  feelsLike: string
  icon: string
  text: string
  wind360: string
  windDir: string
  windScale: string
  windSpeed: string
  humidity: string
  precip: string
  pressure: string
  vis: string
  cloud: string
  dew: string
}

interface WeatherResponse {
  code: string
  updateTime: string
  fxLink: string
  now: NowWeather
  refer: {
    sources: string[]
    license: string[]
  }
  basic?: {
    location: string
  }
}

const weather = ref<WeatherData | null>(null)

const apiKey = 'e3c25af40c184e2f8703f6e5db03431e' // 替换为你的和风天气API密钥
const location = '101130201' // 替换为你想要查询的位置ID

async function fetchWeather() {
  try {
    const response = await axios.get<WeatherResponse>(`https://api.qweather.com/v7/weather/now?location=${location}`, {
      headers: {
        'X-QW-Api-Key': apiKey,
      },
    })

    console.log('Weather API Response:', response.data)

    if (response.data.code === '200') {
      const now: NowWeather = response.data.now
      const cityName = response.data.basic?.location || '未知城市'

      weather.value = {
        cityName,
        temperature: parseFloat(now.temp),
        description: now.text,
        iconCode: now.icon, // 使用 now.icon 作为 iconCode
        humidity: parseFloat(now.humidity),
        windSpeed: parseFloat(now.windSpeed),
      }
    } else {
      console.error('Weather API returned an error:', response.data)
    }
  } catch (error) {
    console.error('Error fetching weather data:', error)
  }
}

function getIconUrl(iconCode: string): string {
  return `https://qushen-outsourcing.oss-cn-beijing.aliyuncs.com/hongyou/tianicons/${iconCode}-fill.svg`
}

onMounted(() => {
  fetchWeather()
})
</script>

<style lang="scss">
.weather-container {
  text-align: left;
  border-radius: 10px;
  height: 100%;
  display: flex;
  flex-direction: column;
  color: rgba(255, 255, 255, 0.9);

  h3 {
    margin-bottom: 15px;
    font-size: 20px;
    font-weight: 500;
    background: linear-gradient(45deg, #7367f0, #28c76f);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  h4 {
    margin: 10px 0;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: normal;
  }

  p {
    margin: 8px 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    gap: 8px;

    &::before {
      content: '';
      display: inline-block;
      width: 6px;
      height: 6px;
      background: #7367f0;
      border-radius: 50%;
      box-shadow: 0 0 10px rgba(115, 103, 240, 0.5);
    }
  }
}

.iconBox {
  width: 60px;
  height: 60px;
  overflow: hidden;
  margin: 10px 0;
  position: relative;

  &::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(115, 103, 240, 0.2) 0%, rgba(115, 103, 240, 0) 70%);
    border-radius: 50%;
    z-index: -1;
  }
}

.icon {
  width: 100%;
  height: 100%;
  filter: drop-shadow(rgb(115, 103, 240) 100px 0);
  transform: translateX(-100px);
  transition: transform 0.3s ease;

  &:hover {
    transform: translateX(-100px) scale(1.1);
  }
}
</style>
